import { Form, Modal, Radio, Select, Space, Tag, Avatar, Input, Col, Button, Checkbox } from 'antd'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import '../component/component.scss'
import { useState, React } from 'react'
import {
  MinusCircleTwoTone
} from '@ant-design/icons'
import { useStore } from '../store'
import { useEffect } from 'react'


const { Option } = Select
const NewQuestionComponent = ({ open, onCreate, onCancel, setFillAnswer, fillAnswer, select, setSelect, selectItem }) => {
  const [questionType, setQuestionType] = useState(3)
  const handleChange = (value) => {
    setQuestionType(value)
  }
  const { subjectStore } = useStore()
  useEffect(() => {
    subjectStore.getSubjectList()
  }, [subjectStore])

  function delHtmlTag (content) {

    return content.toString().replace(/<[^>]+>/g, "")//去掉所有的html标记
  }

  //难易度0 入门1 简单2 中等3 进阶4 困难
  const [complexity, setComplexity] = useState([{ // eslint-disable-line
    num: 0,
    type: '入门'
  }, {
    num: 1,
    type: '简单'
  }, {
    num: 2,
    type: '中等'
  }, {
    num: 3,
    type: '进阶'
  }, {
    num: 4,
    type: '困难'
  }])

  const [value, setValue] = useState()
  const radioChange = (e) => {
    setValue(e.target.value)

  }
  const onCheckChange = (index, e) => {
    if (!selectItem.includes(index)) {
      selectItem.push(index)
    } else {
      selectItem.splice(selectItem.indexOf(index), 1)

    }
  }
  const delSelect = (e) => {//删除一个后index就变了不能按顺序删
    const newSelect = select.filter((item, index) => { return index !== e })
    setSelect(newSelect)
  }

  //判断题
  const [judgeValue, setJudgeValue] = useState(true)
  const onChange = (e) => {
    setJudgeValue(e.target.value)
  }
  //填空题

  const del = (index) => {
    const newLength = fillAnswer.filter((item) => item.id !== index)
    setFillAnswer(newLength)
  }


  //富文本编辑器
  const [dsOpen, setDsOpen] = useState(false)



  //
  const [form] = Form.useForm()
  return (
    <Modal
      open={open}
      title="新建题目"
      okText="Create"
      cancelText="Cancel"
      width={1200}
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields()
            onCreate(values)
          })
          .catch((info) => {
            console.log('Validate Failed:', info)
          })
      }}
    >
      <Form
        form={form}
        layout="horizontal"
        name="form_in_modal"
        labelCol={{
          span: 2,
        }}
        wrapperCol={{
          span: 14,
        }}
      >
        <Form.Item>
          <Space>
            <Form.Item
              name="questionType"
              label="题目类型"
              initialValue={3}
            >
              <Select
                style={{
                  width: 120,
                }}
                onChange={handleChange}
              >
                <Option value={1}>判断题</Option>
                <Option value={2}>填空题</Option>
                <Option value={3}>单选题</Option>
                <Option value={4}>多选题</Option>
                <Option value={5}>简答题</Option>
              </Select>
            </Form.Item>

            <Form.Item name='subjectType' label='科目' initialValue={1} >
              <Select
                style={{
                  width: 120,
                }}
              >
                {subjectStore.subjectList.map((item) => (<Option value={item.id} key={item.id}>{item.course_name}</Option>))}
              </Select>
            </Form.Item>
            <Form.Item name='complexity' label='难易度' initialValue={0}>
              <Select
                style={{
                  width: 120,
                }}
              >
                {complexity.map((item) => (<Option value={item.num} key={item.num}>{item.type}</Option>))}
              </Select>
            </Form.Item>

          </Space>
        </Form.Item>

        <Form.Item name="question_stem" label="题干">
          <ReactQuill theme='snow' />
        </Form.Item>
        <Form.Item name='question_description' label='题目描述'>
          <ReactQuill theme='snow' />
        </Form.Item>
        {/* 简答 */}
        {questionType === 5 ?
          <Form.Item name='shortAnswer' label='答案'>
            <ReactQuill theme='snow' />
          </Form.Item>
          : null}
        {/* 多选 */}
        {questionType === 4 ? <Form.Item label='选项'  >

          <Space direction="vertical">
            {
              select.map((item, index) => {
                return (
                  <Space direction="horizontal" key={item.id}>
                    <Space direction='vertical'>
                      <Checkbox onChange={(e) => onCheckChange(index, e)} >
                        {item.name}
                      </Checkbox>

                      {selectItem.includes(index) ? <Tag color='green' >正确选项</Tag> : null}

                    </Space>
                    <Form.Item name={item.id + 'answer'}>
                      <ReactQuill theme='snow' onChange={(content,) => {
                        let newContent = delHtmlTag(content)
                        const answerClone = [...select]
                        answerClone.forEach((p) => {
                          p.answer = newContent
                        })
                        setSelect(answerClone)
                      }} />
                    </Form.Item>
                    <Avatar
                      onClick={() => delSelect(index)}
                      icon={<MinusCircleTwoTone />}>
                    </Avatar>
                  </Space>
                )
              })
            }
          </Space>
        </Form.Item> : null}

        {/* 单选 */}
        {questionType === 3 ? <Form.Item label='选项'  >
          <Space direction="vertical">
            {
              select.map((item, index) => {
                return (
                  <Space direction="horizontal" key={item.id}>
                    <Space direction='vertical'>
                      <Form.Item name='rightAnswer'  >
                        <Radio.Group onChange={radioChange} value={value} >
                          <Radio value={item.id} >
                            {item.name}
                          </Radio>
                        </Radio.Group>
                      </Form.Item>

                      {value === item.id ? <Tag color='green' >正确选项</Tag> : null}
                    </Space>
                    <Form.Item name={item.id + 'answer'}>
                      <ReactQuill theme='snow' onChange={(content) => {
                        let newContent = delHtmlTag(content)
                        const answerClone = [...select]
                        answerClone.forEach((p) => {
                          p.answer = newContent
                        })
                        setSelect(answerClone)
                      }} />
                    </Form.Item>
                    <Avatar
                      onClick={() => delSelect(index)}
                      icon={<MinusCircleTwoTone />}>
                    </Avatar>
                  </Space>
                )
              })
            }
          </Space>
        </Form.Item> : null}
        {questionType === 2 ? <Form.Item >
          <Space direction='vertical'>
            {fillAnswer.map((item, index) => {
              return (
                <Space key={item.id} >
                  <Col>填空{item.id}:
                  </Col>
                  <Form.Item name={'answer' + item.id} >
                    <ReactQuill theme='snow' onChange={(content) => {
                      let newContent = delHtmlTag(content)
                      const answerClone = [...fillAnswer]
                      answerClone.forEach((p) => {
                        p.myanswer = newContent
                      })
                      setFillAnswer(answerClone)
                    }} />
                  </Form.Item>
                  <Avatar
                    onClick={() => del(index)}
                    icon={<MinusCircleTwoTone />}>
                  </Avatar>
                </Space>
              )
            })}
            <Button onClick={() => {
              const num = fillAnswer.length
              const newAnswer = {
                id: num, myanswer: ''
              }
              setFillAnswer([...fillAnswer, newAnswer])
              console.log(fillAnswer)
            }}>
              新增答案
            </Button>
          </Space>

        </Form.Item> : null}
        {questionType === 1 ? <Form.Item>
          <Space>
            <p className='p-nq'>答案:</p>
            <Form.Item name='answer' >
              <Radio.Group onChange={onChange} value={judgeValue}>
                <Radio value={true} >正确</Radio>
                <Radio value={false} >错误</Radio>
              </Radio.Group>
            </Form.Item>
          </Space>
        </Form.Item> : null}
        <Form.Item name='score' label='分值'>
          <Input placeholder='分值'></Input>
        </Form.Item>
        {dsOpen === true ? <Form.Item name='description' label='答案描述'>
          <ReactQuill theme='snow' placeholder='请添加答案解析' />
        </Form.Item> : <Button onClick={() => setDsOpen(!dsOpen)}>添加答案解析</Button>}
      </Form>
    </Modal >
  )
}
export default NewQuestionComponent